<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人介绍</title>
    <style>
        *{
            list-style: none;
            padding: 0;
            margin: 0;
            text-decoration: none;
        }
			body{
				background-image: url(img/661c132bff9b4d3387d80c5a35360f05.jpg);
				background-size: 100%;
				margin:0;
				background-attachment: fixed;
		}
		

		</style>
		<link rel="stylesheet" href="./css/hobby.css">
		<link rel="stylesheet" href="./css/swiper-bundle.min.css">
		<link rel="stylesheet" href="./css/animate.min.css">
		
	</head>
	<body>
		<div class="nav animated bounceIn">
			<ul>
				<li><a href="./index.html">首页</a></li>
				<li><a href="./text.html">个人介绍</a></li>
				<li><a href="./hobby.html">个人爱好</a></li>
				<li><a href="./home.html">我的家乡</a></li>
				<div class="nav-box"></div>
			</ul>
		</div>
        <div id="title1" class="animated rubberBand">我喜欢的游戏</div>
		<script src="./js/swiper-bundle.min.js"></script>
		<div class="swiper">
			<div class="swiper-wrapper ">
				<div class="swiper-slide"><img src="./img/123.jpg"></div>
				<div class="swiper-slide"><img src="./img/2.png"></div>
				<div class="swiper-slide"><img src="./img/3.png"></div>
				<div class="swiper-slide"><img src="./img/4.png"></div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
			
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
			
			<!-- 如果需要滚动条 -->
			<div class="swiper-scrollbar"></div>
		</div>
		<script>        
			var mySwiper = new Swiper ('.swiper', {
			  direction: 'vertical', // 垂直切换选项
			  loop: true, // 循环模式选项
			  
			  // 如果需要分页器
			  pagination: {
				el: '.swiper-pagination',
			  },
			  
			  // 如果需要前进后退按钮
			  navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			  },
			  
			  // 如果需要滚动条
			  scrollbar: {
				el: '.swiper-scrollbar',
			  },
			})        
			</script>
		<div class="hobby-text">
			<h1 class="animated wobble">崩坏三</h1>
			<p class="animated bounceInRight">
			崩坏3是一款几年前的老游戏，但依旧有着很强的竞争力。这款游戏的角色特写，特效，美工，打击感，在手游中是数一数二的。它的剧情和角色，以及关卡之间的衔接很顺畅，能够给玩家们带来强烈的代入感，剧情那叫一个“甜”。下面推荐一个最近很火的视频，可以让你更了解这个这个游戏，欢迎入坑。</p>
			<p style="font-size: 50px; line-height: 70px; text-indent: 2em;text-align: center;text-decoration: none;color: rgb(241, 23, 172);"><a href="https://www.bilibili.com/video/BV1fY4y1F7GL/?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click&vd_source=e94403d85d079230ecb2a06c46e5fd14">因你而在的故事</a></p>	
		</div>
		<div id="hobby-pic"><img src="./img/875794.jpg"></div>
		<div class="hobby-text">
			<h1 class="animated wobble">明日方舟</h1>
			<p class="animated bounceInRight">明日方舟是由鹰角网络自主开发运营的一款策略向即时战略塔防游戏，画风有趣，玩法简单，过不了关，b搜zc或者萧然。</p>
			<p class="animated bounceInRight">还有原神，阴阳师和其他大型单机游戏我就不一一列举了。</p>
    
		</div>
		<div id="title2" class="animated rubberBand">我喜欢的音乐</div>
		<div class="hobby-text">
		<P class="animated bounceInRight">在游戏或者闲暇的时候我经常会听一些音乐，放送心情。</P>
		<p class="animated bounceInRight">下面分享了几首音乐和我的歌单，希望你能喜欢，需要联网哦。</p>
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=26989255&auto=1&height=66"></iframe>
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1448511372&auto=1&height=66"></iframe>
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=438981332&auto=1&height=66"></iframe>
		<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=567316473&auto=1&height=66"></iframe>
		<p style="font-size: 50px; line-height: 70px;text-decoration:none; text-indent: 2em;"><a href="https://y.qq.com/n/ryqq/playlist/1169606677">我的歌单</a></p>
	    </div>
	</body>
		
</html>    